/**
 * 组件：Table Row 组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';
import Color from '../constant/color';

class TableRowInputItem extends Component {

    static propTypes = {
        title: PropTypes.string,
        value:PropTypes.string,
        iconSource: Image.propTypes.source,
        placeHolder: PropTypes.string,
        rightTitle: PropTypes.string,
        showSplit: PropTypes.bool,
        showRightArrow: PropTypes.bool,
        marginTop: PropTypes.number,
        marginBottom: PropTypes.number,
        imageIconStyle: Image.propTypes.style,
        textInputStyle: TextInput.propTypes.style,
        titleStyle: Text.propTypes.style,
        style: View.propTypes.style,
        onChangeText:PropTypes.func,
    }

    static defaultProps = {
        title: null,
        value:'',
        placeHolder: '',
        rightTitle: null,
        showSplit: true,
        showRightArrow: false,
        marginTop: 0,
        marginBottom: 0,
        imageIconStyle: null,
        textInputStyle: null,
        titleStyle: null,
        style: null,
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }

    onChangeText=(text)=>{
        const {onChangeText} = this.props
        if(onChangeText){
            onChangeText(text);
        }
    }

    render() {
        const {style, title, titleStyle, textInputStyle, placeHolder,value, imageIconStyle, rightTitle, iconSource, onPress, showSplit, showRightArrow, marginTop, marginBottom} = this.props
        return (
            <View style={[styles.containerOuter, {marginTop: marginTop, marginBottom: marginBottom}, style]}>
                <View style={styles.container}>
                    <View style={styles.leftPanel}>
                        {iconSource && <Image style={[styles.imageIcon, imageIconStyle]} source={iconSource}/>}
                        {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
                        <TextInput placeholder={placeHolder} value={value} style={[styles.inputText, textInputStyle]} onChangeText={this.onChangeText}/>
                    </View>
                    <View style={styles.rightPanel}>
                        <Text style={styles.rightTitle}>{rightTitle}</Text>
                        {showRightArrow && <Image style={styles.imageArrow}
                                                  source={require('../../spe/yuanwangjiaoyou/images/mine/mine_zizhi_more.png')}/>}
                    </View>
                </View>
                {showSplit && <View style={styles.splitLine}></View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerOuter: {
        backgroundColor: 'white',
    },
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        // borderWidth:1,
    },
    leftPanel: {
        paddingLeft: 8,
        flexDirection: 'row',
        justifyContent: 'center',
        flex: 1,
    },
    imageIcon: {
        width: 40,
        height: 40,
        borderRadius: 5,
        backgroundColor: 'gray',
    },
    rightPanel: {
        padding: 10,
        flexDirection: 'row',
    },
    topTitlePanel: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingBottom: 10,
    },
    title: {
        fontSize: 14,
        flex: 1,
    },
    rightTitle: {
        fontSize: 12,
        color: '#6F6F6F',
        textAlign: 'right',
    },
    subTitle: {
        fontSize: 10,
        color: '#6F6F6F',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        flex: 1,
        backgroundColor: Color.SPLIT_COLOR,
        marginLeft: 8,
    },
    imageArrow: {
        width: 9,
        height: 15,
        marginLeft: 8,
    },
    inputText: {
        flex: 1,
        fontSize:12,
        // borderWidth:1,
    },
});

export default TableRowInputItem;